<template>
  <div class="add-user">
    <Header></Header>
    <div class="wrapper">
      <van-form @submit="onSubmit">
        <van-field v-model="selfUserInfo.id" name="aae011" label="经办人代码" v-show="false"/>
        <van-field v-model="selfUserInfo.xm" name="aae019" label="经办人" v-show="false"/>
        <van-field v-model="loginInfo.aae100" name="aae100" label="有效标志" v-show="false"/>
        <van-field v-model="loginInfo.chlx" name="chlx" label="参会类型代码" v-show="false"/>
        <van-field v-model="loginInfo.csdbd" name="csdbd" label="参赛团队代码" v-show="false"/>
        <van-field v-model="loginInfo.tdbh" name="tdbh" label="团队编号" v-show="false"/>
        <van-field v-model="loginInfo.zjlx" name="zjlx" label="证件类型" v-show="false"/>
        <van-field
          v-model="loginInfo.xm"
          name="xm"
          label="姓名"
          placeholder="姓名"
          autocomplete="off"
          label-class="vaild"
          :rules="[{ required: true }]"
        />
        <van-field
          readonly
          clickable
          name="zjlxValue"
          v-model="loginInfo.zjlxValue"
          autocomplete="off"
          label="证件类型"
          placeholder="点击选择证件类型"
          label-class="vaild"
          @click="showZjlx = true"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="loginInfo.idcard"
          name="idcard"
          label="证件号码"
          placeholder="请填写正确的证件号码"
          label-class="vaild"
          autocomplete="off"
          :rules="[
            { required: true },
            {
              validator: zjhmValidator,
              message: '请填写正确的证件号码'
            }
          ]"
        />
        <van-field
          v-model="loginInfo.tel"
          name="tel"
          label="手机号码"
          placeholder="请填写手机号码"
          label-class="vaild"
          autocomplete="off"
          maxlength="11"
          :rules="[{ required: true }]"
        />

        <!--        领队线下提供，主页页面不再需要邮箱，屏蔽掉-->
        <!--        <van-field
                  name="email"
                  v-model="loginInfo.email"
                  autocomplete="off"
                  label="邮箱"
                  placeholder="请填写邮箱"
                  :rules="[{ required: isEmail }]"
                />-->
        <van-field
          readonly
          clickable
          name="tdmc"
          v-model="loginInfo.tdmc"
          autocomplete="off"
          label="参会人员类别"
          placeholder="点击选择参会人员类别"
          label-class="vaild"
          @click="showPickerCsry = true"
          type="textarea"
          rows="1"
          autosize
          :rules="[{ required: true }]"
        />
        <van-field
          v-if="isDbd == 1"
          readonly
          clickable
          name="tdmc"
          v-model="loginInfo.tdmc1"
          autocomplete="off"
          label="参赛代表团名称"
          placeholder="点击选择参赛代表团名称"
          label-class="vaild"
          @click="showPickerTeam = true"
          :rules="[{ required: true }]"
        />
        <van-field
          readonly
          clickable
          v-if="showRylb"
          name="chlxValue"
          v-model="loginInfo.chlxValue"
          label-class="vaild"
          label="团队人员类别"
          autocomplete="off"
          placeholder="点击选择团队人员类别"
          @click="showPickerRylb = true"
          :rules="[{ required: true }]"
        />

        <div class="mar-16" v-if="isShowBtn">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <!-- 证件类型 -->
      <van-popup v-model="showZjlx" position="bottom">
        <van-picker
          show-toolbar
          value-key="value"
          :columns="zjlxColumns"
          @confirm="zjlxConfirm"
          @cancel="showZjlx = false"
        />
      </van-popup>
      <!-- 参赛人员类别 -->
      <van-popup v-model="showPickerCsry" position="bottom">
        <van-picker
          show-toolbar
          value-key="value"
          :columns="csryColumns"
          @confirm="csryConfirm"
          @cancel="showPickerCsry = false"
        />
      </van-popup>
      <!-- 参赛代表团名称 -->
      <van-popup v-model="showPickerTeam" position="bottom">
        <van-picker
          show-toolbar
          :columns="teamData"
          value-key="value"
          @confirm="teamConfirm"
          @cancel="showPickerTeam = false"
        />
      </van-popup>
      <!-- 团队人员类别 -->
      <van-popup v-model="showPickerRylb" position="bottom">
        <van-picker
          show-toolbar
          :columns="rylbColumns"
          value-key="value"
          @confirm="rylbConfirm"
          @cancel="showPickerRylb = false"
        />
      </van-popup>

    </div>
  </div>
</template>

<script>
import { saveUserInfo } from 'api/userInfo'
import { teamData, zjlx, csryColumns } from '@/utils/code'
import { returnArray, parseTime } from '@/utils/'
import { getSelfInfo } from '@/utils/tokenUtil'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Reg',
  data() {
    return {
      loginInfo: {
        idcard: '',
        zjlx: '',
        zjlxValue: '',
        tdbh: '',
        tdmc: '',
        tdmc1: '',
        xm: '',
        tel: '',
        aae100: '1',
        sfcsdwry: '',
        chlx: '',
        chlxValue: '',
        csdbdValue: '',
        email: ''
      },
      selfUserInfo: {},
      isDbd: '',
      showPickerCsry: false,
      showPickerRylb: false,
      showPickerTeam: false,
      showRylb: false,
      showZjlx: false,
      zjlxColumns: zjlx,
      csryColumns: [],
      rylbColumns: [],
      columns: [],
      teamData,
      isEmail: false
    }
  },
  computed: {
    ...mapState(['isShowBtn'])
  },
  created() {
    this.getBtnStatusAsync()
    this.selfUserInfo = getSelfInfo()
    this.csryColumns.push(csryColumns[0])
  },
  methods: {
    ...mapActions(['getBtnStatusAsync']),
    zjhmValidator(value) {
      if (this.loginInfo.zjlx == '01') {
        return /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)
      }
      return true
    },
    onSubmit(data) {
      if (data.chlx == '5' || data.chlx == '8') {
        data.isManager = true
      } else {
        data.isManager = false
      }
      data.aae020 = parseTime(new Date())
      this.$dialog
        .confirm({
          message: '请确认提交消息填写无误，提交后不能进行二次修改！如有疑问，请联系0757-82023629'
        })
        .then(() => {
          saveUserInfo(data).then(res => {
              this.$dialog
                .alert({
                  message: '新增人员提交成功，请联系领队在人员管理中补全人员参会报名信息！'
                })
                .then(() => {
                  this.$router.go(-1)
                })
          })
          // checkGaIsMatch(data.idcard, data.xm).then(res => {
          //   if (res.code == '200') {
          //
          //   } else {
          //     this.$dialog.alert({
          //       title: '错误信息',
          //       message: res.msg
          //     })
          //   }
          // })
        })
    },
    csryConfirm(item) {
      if (item.key == '99') {
        this.isDbd = 1
      } else {
        this.isDbd = ''
      }
      this.loginInfo.tdbh = item.key
      this.loginInfo.tdmc = item.value
      this.loginInfo.tdmc1 = ''
      this.loginInfo.chlxValue = ''
      this.loginInfo.chlx = ''
      if (item.showChild && item.hasOwnProperty('child')) {
        this.showRylb = true

        this.rylbColumns = item.child.filter(item => item.key == '4' || item.key == '6')
      } else if (!item.showChild && item.hasOwnProperty('child')) {
        this.showRylb = false
        this.loginInfo.chlx = item.child[0].key
      }
      this.showPickerCsry = false
    },
    rylbConfirm(item) {
      // if (item.key == '42') {
      //   this.teamData = returnArray(teamData, 'key', 2)
      //   this.loginInfo.tdmc1 = ''
      //   this.loginInfo.tdbh = ''
      // } else if (this.teamData.length == 1) {
      //   this.teamData = teamData
      // }
      if (item.key == '5') {
        this.isEmail = true
      } else {
        this.isEmail = false
      }
      this.loginInfo.chlx = item.key
      this.loginInfo.chlxValue = item.value
      this.showPickerRylb = false
    },
    teamConfirm(item) {
      this.loginInfo.tdbh = item.key
      this.loginInfo.tdmc1 = item.value
      this.showPickerTeam = false
    },
    zjlxConfirm(item) {
      this.loginInfo.zjlx = item.key
      this.loginInfo.zjlxValue = item.value
      this.showZjlx = false
    }
  }
}
</script>
<style lang="scss" scoped>

/deep/ .van-picker-column__wrapper {
  .van-ellipsis {
    white-space: break-spaces;
  }
}

</style>
